<template>
	<view>
		<view class="acea-row row-middle row-between nav-bg">
			<!-- <scroll-view scroll-x="true" style="white-space: nowrap; display: flex;" scroll-with-animation :scroll-left="tabLeft" show-scrollbar="true">
				<view class="item" :style='"width:"+isWidth+"px"' :data-index="index" :class="index===categoryOn?'item-on':''" v-for="(item,index) in category" :key="index" :id="'id'+index" @click="categoryNavClick(index)">
					<view class="acea-row row-middle row-center img">
						<image :src="'../static/images/'+item.image" mode=""></image>
					</view>	 
					<view class="name">
						{{item.name}}
					</view>
				</view>
			</scroll-view> -->
			<view class="item" :class="index==categoryOn?'item-on':''" v-for="(item,index) in categoryList" :key="index"
				@click="categoryNavClick(item,index)">
				<view class="acea-row row-middle row-center img">
					<image :src="'../static/images/' + item.image" mode=""></image>
					<!-- <image src="../static/images/nav_01.png" mode=""></image>
					<image src="../static/images/nav_02.png" mode="" v-if="index==1"></image>
					<image src="../static/images/nav_03.png" mode="" v-if="index==2"></image>
					<image src="../static/images/nav_04.png" mode="" v-if="index==3"></image>
					<image src="../static/images/nav_05.png" mode="" v-if="index==4"></image>
					<image src="../static/images/nav_06.png" mode="" v-if="index==5"></image> -->
				</view>
				<view class="name">
					{{item.name}}
				</view>
			</view> 	· 
		</view>
		<!-- 
		 房屋/写字楼：出租 求租 出售 求购
		  v-if="(categoryOn==1||categoryOn==5)&&(index!=1)"
		 -->
		<view class="acea-row row-middle type-bg">
			<view class="type" :class="typeOn==index?'type-on':''" v-for="(item,index) in types" :key="index"
				@click="typeNavClick(item,index)">
				{{item.name}}
			</view>
		</view>
		
		<view class="acea-row row-middle row-between item border-b w-48" style="padding: 10rpx 30rpx;" v-if="categoryType==0">
			<view class="label label-m" style="color: red;">新功能：图片快速入库</view>
			<view class="acea-row row-middle row-right small-ipt">
				<u-switch v-model="aiFlag" @change="change" activeColor="#f56c6c"></u-switch>
			</view>
		</view>
		
		<template v-if="aiFlag&&categoryType==0"><aiPhoto  :storeCategory="storeCategory" :st="st" :typeOn='typeOn' :categoryOn='categoryType' :editId="editId" :patientinfo="patientinfo" /></template>
		<template v-else>
					<!-- 商铺、厂房、仓库出租、转让  -->
			<shop-rent-out
				v-if="((typeOn==0||typeOn==1)&&(categoryType==0||categoryType==3||categoryType==4)) "
				:storeCategory="storeCategory" :st="st" :typeOn='typeOn' :categoryOn='categoryType' :editId="editId" :patientinfo="patientinfo"></shop-rent-out>
			<!-- 商铺、土地、仓库、厂房求租 -->
			<ask-for-rent :storeCategory="storeCategory" v-if="(categoryType==0||categoryType==4||categoryType==5||categoryType==3)&&typeOn==2" :typeOn='typeOn' :categoryOn='categoryType' :editId="editId"></ask-for-rent>
			<!-- 商铺、厂房、仓库、土地出售 -->
			<shop-sale :storeCategory="storeCategory" :st="st" v-if="typeOn==3&&(categoryType==0||categoryType==3||categoryType==4||categoryType==5)" :typeOn='typeOn' :categoryOn='categoryType' :editId="editId" :patientinfo="patientinfo"></shop-sale>
			<!-- 所有求购 -->
			<shop-purchase :storeCategory="storeCategory" v-if="typeOn==4" :categoryOn='categoryType' :typeOn='typeOn' :location="locationInfo" :editId="editId"></shop-purchase>
			<!-- 土地出租、转让 -->
			<land-rent :storeCategory="storeCategory" :st="st" v-if="(typeOn==0 || typeOn == 1)&&categoryType==5" :categoryOn='categoryType' :typeOn='typeOn' :editId="editId" :patientinfo="patientinfo"></land-rent>
			<!-- 房屋、写字楼、公寓出租-->
			<house-rent :storeCategory="storeCategory" :st="st" v-if="((categoryType==6||categoryType==1||categoryType==2)&&typeOn==0) || (( categoryType==6||categoryType==1||categoryType==2 )&&typeOn==1 ) "  :categoryOn='categoryType' :typeOn='typeOn' :editId="editId" :patientinfo="patientinfo"></house-rent>
			<!-- 房屋、写字楼、公寓出售 -->
			<house-sale :storeCategory="storeCategory" :st="st" v-if="(categoryType==6||categoryType==1||categoryType==2)&&typeOn==3" :categoryOn='categoryType' :typeOn='typeOn' :editId="editId" :patientinfo="patientinfo"></house-sale>
			<!-- 房屋、写字楼、公寓求租 -->
			<house-ask-rent :storeCategory="storeCategory" v-if="(categoryType==6||categoryType==1||categoryType==2)&&typeOn==2" :categoryOn='categoryType' :editId="editId"></house-ask-rent>
		</template>


		<view class="uni-p-b-98"></view>
	</view>
</template>

<script>
	import shopRentOut from '../components/shopRentOut.vue'
	import askForRent from '../components/askForRent.vue'
	import shopSale from '../components/shopSale.vue'
	import shopPurchase from '../components/shopPurchase.vue'
	import landRent from '../components/landRent.vue'
	import houseRent from '../components/houseRent.vue'
	import houseSale from '../components/houseSale.vue'
	import houseAskRent from '../components/houseAskRent.vue'
	import aiPhoto from '../ai/aiPhoto.vue'
	import {
		getDetail
	} from '@/api/centerModule'
	import {
		getLocation
	} from '@/filters/commFilter.js'
	export default {
		components: {
			shopRentOut,
			askForRent,
			shopSale,
			shopPurchase,
			landRent,
			houseRent,
			houseSale,
			houseAskRent,
			aiPhoto
		},
		data() {
			return {
				isWidth: 40,
				isLeft: 0,
				tabLeft: 0,
				aiFlag:false,
				types: [{
					name: '出租'
				}, {
					name: '转让'
				}, {
					name: '求租'
				}, {
					name: '出售'
				}, {
					name: '求购'
				}],
				typeOn: 0,
				categoryList: [{
					name: '商铺',
					image: 'nav_01.png',
					type: 0,
				}, {
					name: '房屋',
					image: 'nav_06.png',
					type: 6
				}, {
					name: '写字楼',
					image: 'nav_02.png',
					type: 1
				}, {
					name: '公寓',
					image: 'nav_02.png',
					type: 2
				}, {
					name: '厂房',
					image: 'nav_03.png',
					type: 3
				}, {
					name: '仓库',
					image: 'nav_04.png',
					type: 4
				}, {
					name: '土地',
					image: 'nav_05.png',
					type: 5
				}],
				categoryOn: 0,
				locationInfo: {},
				editId: null,
				patientinfo: {},
				st:'',
				storeCategory:''
			};
		},
		computed: {
			categoryType() {
				return this.categoryList[this.categoryOn].type
			}
		},
		onLoad(options) {
			if(options.type){
				this.typeOn=options.type;
			}
			if(options.typeOn){
				this.typeOn=options.typeOn;
			}
			this.st = options.st;
			this.storeCategory = options.storeCategory
			console.log('this.storeCategorythis.storeCategory',this.storeCategory)
			this.getLocationInfo();
			// if (!options.typeOn) return;
			// this.typeOn = options.typeOn;
			this.categoryList.forEach((item,index)=>{
				if(item.type == options.categoryOn){
					this.categoryOn = index;
				}
			})
			if (options.patientinfoId) {
				this.getPatientinfo(options.patientinfoId);
			}
			console.log("types",this.types[this.typeOn].name,this.typeOn)
			let title =(options.id?'编辑-':'发布-')+(this.categoryList[this.categoryOn].name)+(this.types[this.typeOn].name)
			uni.setNavigationBarTitle({
				title:title
			});
			if (!options.id) return;
			this.editId = options.id
		},
		methods: {
			//获取物业
			getPatientinfo(id) {
				getDetail(id).then(res => {
					console.log(res.data)
					let {
						data
					} = res;
					this.patientinfo = data;
				})
			},
			//获取地理位置信息
			async getLocationInfo() {
				try {
					this.locationInfo.city = this.$city;
					let {
						latitude,
						longitude
					} = await getLocation();
					this.locationInfo = {
						...this.locationInfo,
						latitude,
						longitude
					}
				} catch (e) {
					//TODO handle the exception
				}
			},

			typeNavClick(item, index) {

				if (this.editId) {
					this.$util.Tips({
						title: '编辑状态不可切换'
					})
					return;
				}
				if (this.editId) {
					this.$util.Tips({
						title: '编辑状态不可切换'
					})
					return;
				}
				let title = '发布-' + this.categoryList[this.categoryOn].name + item.name
				uni.setNavigationBarTitle({
					title: title
				})
				this.typeOn = index
			},
			// 导航栏点击
			categoryNavClick(item, index) {
				if (this.editId) {
					this.$util.Tips({
						title: '编辑状态下不可切换'
					})
					return;
				}
				let title = '发布-' + item.name + this.types[this.typeOn].name
				uni.setNavigationBarTitle({
					title: title
				})
				if (this.categoryList.length > 6) {
					var tempIndex = index - 2;
					tempIndex = tempIndex <= 0 ? 0 : tempIndex;
					this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
				}
				this.categoryOn = index //设置导航点击了哪一个
				this.isLeft = index * this.isWidth //设置下划线位置
			},
		}
	}
</script>

<style lang="scss">
	.nav-bg {
		background: #ffffff;
		padding: 18rpx 30rpx 36rpx;

		.item~.item {
			// margin-left: 48rpx;
		}

		.item {
			display: inline-block;
			white-space: nowrap;

			.img {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				background: #ffffff;

				image {
					width: 42rpx;
					height: 44rpx;
				}
			}

			.name {
				width: 70rpx;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: rgba(0, 0, 0, 1);
				text-align: center;
			}
		}

		.item-on {
			.img {
				// background: rgba(247, 247, 247, 1);
				background-color:rgba(239, 39, 50, .1);
			}

			.name {
				position: relative;
				color: rgba(239, 39, 50, 1);
				font-weight: 700;
				&::after{
					content: '';
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					height: 50%;
					background-color:rgba(239, 39, 50, .2);
					border-radius: 10rpx;
				}
			}
		}
	}

	.type-bg {
		padding: 24rpx 30rpx;
		background: rgba(247, 248, 250, 1);

		.type~.type {
			margin-left: 18rpx;
		}

		.type {
			padding: 6rpx 24rpx;
			border-radius: 10rpx;
			border: 1px solid rgba(229, 229, 229, 1);
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
		}

		.type-on {
			border: 1px solid rgba(238, 33, 45, 1);
			background: rgba(238, 33, 45, 1);
			color: #ffffff;

		}
	}
</style>